import React from 'react'
// ===================================================================== Temp
import FormModal from '#cpt/temp/FormModal'
// ===================================================================== global declare
const { $http, $Lazy, $fn } = window
// ===================================================================== Lazy
const Button 			= $Lazy.load(()=>import('@antd/button'))
const Image 			= $Lazy.load(()=>import('@tp/image'))
const Page 				= $Lazy.load(()=>import('#tp/content/content-aside'))
const Box				= $Lazy.load(()=>import('#tp/box/box'))
const Radio 			= $Lazy.load(()=>import('@antd/form/radio'))
// 
const ModPassword 		= $Lazy.state(()=>import('#private/pages/mod-password'))
const PrinterSetModal 	= $Lazy.state(()=>import('#private/pages/printer-set-modal'))
//
const message			= $Lazy.file(()=>import('@antd/message'))
const Upload			= $Lazy.file(()=>import('@com/utils/upload'))
// ===================================================================== template
const LiComponent = ({ title, context }) => (
	<li className='mt15 f12 fxm'>
		<div className='r2px mr10' style={{width:'4px',height:'4px',background:'#999'}}></div>
		<span className='g9'>{title}</span>
		<b>{context}</b>
	</li>
)
const HeaderComponent = ({ title, context, onClick }) => (
	<div className='fxm mt20'>
		<div className='r5px' style={{width:'10px',height:'10px',background:'#dbeefa'}}></div>
		<div className='r5px bcm' style={{width:'10px',height:'10px'}}></div>
		<h3 className='f14 ml10'>{title}</h3>
		<p className='ml5 f12 cp' style={{color:'red'}} onClick={onClick}>修改</p>
	</div>
)
const MainComponent = ({ title, context }) => (
	<div className=' bbor1 mt20 ml20 ex' style={{height:'80px'}}>
		<h4 className='rbor1 g9'>{title}</h4>
		<p className='mt20'>{$fn.val(context)}</p>
	</div>
)
// ===================================================================== component
class Index extends React.Component{
	state = {
		data:{},
		// 修改个人自信表单
		formData : [
			{ label: '真实姓名',		name: 'real_name', 	required: true, full:true },
			{ label: '邮箱',		name: 'email',		required: true, full:true},
			{ label: '详情信息',		name: 'empl_desc',	full:true, type:'textarea'},
		],
		tc_mode:false
		
	}
	submit = {}
	componentDidMount(){
		this.fetch()
	}
	
	fetch = isSave => $http.pull(this,'employee/currentuser', { loading:true}).then(data=>{
		if(isSave){
			if( $fn.hasObject(data) ){ $fn.local('user',{...$fn.getUser(),...data}) }
			window.location.reload()
		}
	})
	
	// 上传签名
	onUpload = e => {
		Upload.then(f=>{
			// 修改上传文件、报告单、图片的接口地址和参数及返回结果处理 2021-10-9 --马婷
			// f(e,{name:'files', param:{modular: 121, source_come: 'signature'}}).then(fd => {		 // 上传签名图片添加参数source_come 2021-9-7  --马婷
			f(e,{name:'file', param:{rename:1,app_key:'norson',params:'ZnJvbT1udGRj',sign:'68c4e2f97684733217348ba32f5b6b36'}}).then(fd => {		 // 上传签名图片添加参数source_come 2021-9-7  --马婷 
				$http.submit(this,`${window.globalConfig.uploadUrl}/upload.php`,{ param: fd, upload:true }).then(data=>{
					message.then(f=>f.success('上传图片成功'))
					if($fn.hasArray(data)){
						$http.submit(this,'employee/editInfo', {param:{ signature: data[0], uuid: this.state.data.uuid} }).then(data=>{
							this.fetch()
							message.then(f=>f.success('修改签名成功'))
						})
					}
				})
			})
			this.refs.upload.value = ''
		})
	}
	
	render(){
		const { data, tc_mode  } = this.state
		return (
			<>
				<Page className='fxj' scroll>
					<Box className='p30' style={{width:'300px'}}>
						<div className='fxc mt40'>
							<Image width={80} height={80} wrap src={data.head_portrait} network />
						</div>
						<h2 className='f16 tc mt20'>{data.real_name}</h2>
						<div className='fxc mt20'><Button label='设置打印机' ghost onClick={()=> this.printerRef.open() }/></div>
						<ul className='mt20'>
							<LiComponent title='部门：'  context={data.dept}/>
							<LiComponent title='岗位：'  context={data.pgroup}/>
							<LiComponent title='员工编号：'  context={data.empl_name}/>
							<LiComponent title='手机号码：'  context={data.phone}/>
							<LiComponent title='英文名：'  context={data.en_name}/>
						</ul>
					</Box>
					<Box className='p30 ml5 ex'>
						<HeaderComponent title='个人信息' onClick={()=> {
							const userData = $fn.getUser()
							this.submit = {uuid: userData.uuid}
							this.modal.open({formRef:this.formRef})
						} }/>
						<div className='fxm'>
							<MainComponent title='员工姓名'  context={data.real_name}/>
							<MainComponent title='员工邮箱'  context={data.email}/>
							<MainComponent title='员工详情'  context={data.empl_desc}/>
						</div>
						<HeaderComponent title='登录密码' onClick={()=> this.pwdRef.open() }/>
						<MainComponent title='登录密码'  context='******* ' />
						<HeaderComponent title='个人签名' onClick={()=>{ this.refs.upload.click() }}/>
						<div className='mt20' style={{width:150}}><Image src={data.signature} wrap network /></div>
						<input ref='upload' onChange={this.onUpload} type='file' />
						<HeaderComponent title='检测中心模式' onClick={()=>{ 	 // 添加检测中心模式选项 2021-9-3 --马婷	检测中心模式选项样式调整 2022-3-30
							this.setState({tc_mode:true})
						}}/>
						{tc_mode && <div className='p20'><Radio ref='radioRef' data={[{value:0,name:'普通模式'},{value:1,name:'分栏模式'}]} value={+data.check_view_mode} onChange={value=>{
							const userData = $fn.getUser()
							$http.submit(null,'Employee/editInfo',{ param:{ uuid:userData.uuid,check_view_mode:value}, loading:true}).then(data=>{
								$fn.msg.success('修改成功')
								$fn.local('user',{...userData,check_view_mode:value})
							})
						}}/></div>}
					</Box>
				</Page>
				{/* 修改个人信息  */}
				{ FormModal.call(this,{ title: '修改个人信息', labelWidth:'s6', api:'Employee/editInfo', formValue: data }) }
				{/* 修改登录密码  */}
				<ModPassword onRef={ ref => this.pwdRef = ref } uui={data.uuid} />
				{/* 设置打印机  */}
				<PrinterSetModal onRef={ ref => this.printerRef = ref } />
			</>
		)
	}
}

export default Index